<template>
  <div>
    <div>
      <el-input
          size='small'
          v-model="search"
          placeholder="请输入日期/姓名/地址"
          clearable
          maxlength="64"
          style="width:15%"
          show-word-limit
      />
      <el-button
          class="buttonStyle"
          style="margin-left: 20px"
          @click="query()"
      >查询</el-button>
    </div>
    <div>
      <el-table
          :data="list"
          style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
            width="180">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  inject:['reload'],
  data() {
    return {
      list: [{
          id:"1111111111111",
          date: '2010-05-02',
          name: '赵小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id:"22222222222222",
          date: '2011-05-04',
          name: '钱小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id:"333333333",
          date: '2012-05-01',
          name: '孙小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id:"4444444444444444",
          date: '2013-05-03',
          name: '李小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }, {
          id:"555555555555",
          date: '2014-05-04',
          name: '周小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id:"66666666666666",
          date: '2015-05-01',
          name: '武小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id:"7777777777777",
          date: '2016-05-04',
          name: '郑小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id:"888888888888",
          date: '2017-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }],
      search: '',//搜索关键字
    }
  },
  methods:{
    indexMethod(index) {
      return index + 1;
    },
    query(){
     let _search = this.search.toLowerCase();
     let newListDate = [];
     if(_search === "" || _search===null){
       this.reload()
     }
      if(_search){
        this.list.filter((item) =>{
          if(
              item.name.toLowerCase().indexOf(_search) !== -1 ||
              item.date.toLowerCase().indexOf(_search) !== -1 ||
              item.address.toLowerCase().indexOf(_search) !== -1
          ){
            newListDate.push(item)
          }
        });
      }
     this.list = newListDate;
    }
  }
}
</script>

<style scoped>

</style>
